<template>
  <div class="music">
    <div class="album-box">
      <album :albumId="songInfo.albumid"></album>
      <!-- <div>currentSongId: {{ currentSongId }}</div>
      <div>currentAlbumId: {{ currentAlbumId }}</div> -->
      <!-- <album :albumId="1"></album> -->
    </div>
    <div class="comments-box">
      <comments :albumName="songInfo.albumname" :songName="songInfo.name"
        :singerName="songInfo.singername" :coms="coms"
        :currentSongId="currentSongId" :currentUserId="currentUserId"
        @refreshComments="refreshComments" />
    </div>
  </div> 
</template>

<script>
import axios from 'axios';
import album from '../components/album.vue';
import comments from '../components/comments.vue'

export default {
  components: {
    album,
    comments,
  },
  props: {
    currentSongId: { type: Number },
    currentUserId: { type: Number },
    // currentAlbumId: { type: Number }
  },
  data() {
    return {
      // albumId: '',
      // albumName: '',
      // singerName: '',
      // songName: '',
      songInfo: {},
      coms: []
    }
  },
  mounted() {
    this.getAlbumId(this.currentSongId)
    this.getComments(this.currentSongId)
  },
  methods: {
    getAlbumId(songId) {
      var _this = this
      axios({
        method: 'post',
        url: '/api/getDetailsBySongId',
        params: {
          'songid': songId
        }
      }).then((res) => {
        console.log(res.data.data[0])
        _this.songInfo = res.data.data[0]
      })
    },
    getComments(songId) {
      var _this = this
      axios({
        method: 'post',
        url: '/api/getCommentsBySongId',
        params: {
          'songid': songId
        }
      }).then((res) => {
        console.log(res.data.data)
        _this.coms = res.data.data
      })
    },
    refreshComments() {
      this.getComments(this.currentSongId)
      console.log('refreshed')
    }
  },
  watch: {
    currentSongId(newVal, oldVal) {
      this.getAlbumId(newVal)
      this.getComments(newVal)
    }
  }
}
</script>

<style>
.music {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.album-box {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comments-box {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
  